<template>
    <div id="me">
        <!--S主体内容-->
        <cube-scroll>
            <!--S头部-->
            <div id="header">
                <img class="head" :src="member.header" />
                <p class="nickname">
                    <svg class="icon"><use xlink:href="#icon-yonghu"></use></svg> {{member.nickname}}
                </p>
                <p class="balance">
                    <svg class="icon icon-balance"><use xlink:href="#icon-yue"></use></svg>￥{{member.balance}}
                </p>
            </div>
            <!--E头部-->

            <!--S导航-->
            <div class="control">
                <dl class="phone" v-if="setting.open_phone === '1'">
                    <router-link to="/me/phone" class="a">
                        <dt>
                            <svg class="icon"><use xlink:href="#icon-shoujirenzheng"></use></svg>
                            <svg class="phone-icon"><use v-bind:xlink:href="member.phone === '' ? '#icon-weirenzheng' : '#icon-yirenzheng'"></use></svg>
                        </dt>
                        <dd>手机认证<i class="cubeic-arrow"></i></dd>
                    </router-link>
                </dl>
                <dl>
                    <router-link to="/me/red" class="a">
                        <dt><svg class="icon"><use xlink:href="#icon-hongbao3"></use></svg></dt>
                        <dd>红包<span v-if="member_red_total > 0">{{str_member_red_total}}</span><i class="cubeic-arrow"></i></dd>
                    </router-link>
                </dl>
                <dl>
                    <router-link to="/me/cash" class="a">
                        <dt><svg class="icon"><use xlink:href="#icon-tixian2"></use></svg></dt>
                        <dd>提现<i class="cubeic-arrow"></i></dd>
                    </router-link>
                </dl>
                <dl>
                    <router-link to="/me/income" class="a">
                        <dt><svg class="icon"><use xlink:href="#icon-shourujilu"></use></svg></dt>
                        <dd>收入记录<i class="cubeic-arrow"></i></dd>
                    </router-link>
                </dl>
                <dl @click="showMedia">
                    <dt><svg class="icon"><use xlink:href="#icon-sucaiku"></use></svg></dt>
                    <dd>素材库<i class="cubeic-arrow"></i></dd>
                </dl>
                <dl @click="link_show= true">
                    <dt><svg class="icon"><use xlink:href="#icon-tuiguanglianjie"></use></svg></dt>
                    <dd>推广链接<i class="cubeic-arrow"></i></dd>
                </dl>
                <dl @click="showAttention" v-if="setting.attention === '1'">
                    <dt><svg class="icon"><use xlink:href="#icon-guanzhu1"></use></svg></dt>
                    <dd>关注我们<i class="cubeic-arrow"></i></dd>
                </dl>
            </div>


            <!--E导航-->

        </cube-scroll>
        <!--E主体内容-->

        <!--S推广链接组件-->
        <i-link
                :toggle="link_show"
                @close="link_show = false"
        ></i-link>
        <!--E推广链接组件-->

        <transition :name="transition_name">
            <router-view class="children" />
        </transition>
    </div>
</template>

<script>
    import store from "../../store/index";
    import Tool from "../../util/Tool";
    import link from "../../module/ilink/ILink";
    export default {
        name: "me",
        data(){
            return {
                uid:0,
                transition_name:"",
                //用户信息
                member:{
                    header:'',
                    nickname:'',
                    balance:'0.00',
                    phone: ''
                },
                //用户发的红包总数
                member_red_total:0,
                //素材库
                media:{
                    show:false
                },
                //推广链接
                link_show:false,
                //参数设置
                setting:[]
            }
        },
        beforeRouteUpdate(to, from, next){
            if(to.name === 'me-publish' || from.name === 'me-publish'){
                if(to.name === 'me-publish'){
                    this.transition_name = "animated publish-animated slideInUp delay-2s";
                }else{
                    this.transition_name = "animated publish-animated slideOutDown delay-2s";
                }
            }else{
                this.transition_name = to.path.split('/').length < from.path.split('/').length ? "animated publish-animated slideOutRight delay-2s" : "animated publish-animated slideInRight delay-2s";
            }
            setTimeout(()=>{
                next();
            },10);
        },
        components:{
            "i-link":link
        },
        computed:{
            //用户的红包总数
            str_member_red_total(){
                let str_total = '';
                if(this.member_red_total > 0){
                    if(this.member_red_total < 999){
                        str_total = '('+this.member_red_total+')';
                    }else{
                        str_total = '('+999+'+)';
                    }
                }
                return str_total;
            }
        },
        watch: {
          "$route"(to,from){
              if(from.name === "me-phone"){
                  this.getMember();
              }
          }
        },
        created(){
            this.$parent.tab_index = 2;
            this.getSetting();
            this.getMember();
            this.getUserRedTotal();
        },
        methods:{
            /**
             * 获取参数
             */
            getSetting(){
              this.$url("setting/easyFind",{
                  return:["attention","open_phone"]
              })
              .then((res)=>{
                  if(res.data.status === "success"){
                      this.setting = res.data.data;
                  }
              });
            },
            /**
             *获取用户资料
             */
            getMember(){
                this.$url('member/easyFind',{
                    return:['balance','phone']
                })
                    .then((res)=>{
                        if(res.data.status === 'success'){
                            this.member = res.data.data;
                        }
                    });
            },
            /**
             * 获取用户发布红包的数量
             */
            getUserRedTotal(){
                this.$url('redDetail/getUserRedTotal')
                    .then((res)=>{
                        if(res.data.status == 'success'){
                            this.member_red_total = parseInt(res.data.data);
                        }
                    });
            },
            /**
             * 显示素材库
             */
            showMedia(){
                store.commit("setMedia",{
                    show:true,
                    select:false,
                    type:"all",
                    value:[],
                    onClose:()=>{
                        store.commit("setMedia",{show:false})
                    }
                });
            },
            /**
             * 显示关注公众号
             */
            showAttention(){
                Tool.getWxAttentionQrcode()
                .then((res)=>{
                    let dialog = this.$createDialog({
                        type: 'alert',
                        title:"长按关注不迷路",
                        content:`<img src='${res}' style="width: 200px;" />`,
                        confirmBtn: {
                            text: '关闭',
                            active: true
                        }
                    });
                    dialog.show();
                });
            },
        }
    }
</script>

<style scoped lang="less" src="./me.less"></style>
